<template>
  <view class="container">
    <header>
      <image src='/static/images/right-white.png' mode='aspectFit|aspectFill|widthFix' alt="" @click="$goPath(1)" />
    </header>

    <section>
      <image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/shareNow-bgImg.png' mode='widthFix' alt="" style="width: 100%;" />
      <view class="sect-qrCode" :style="{ 'top': top + 'px' }">
        <image :src='ewmImg' mode='widthFix' alt="" class="ewm-img" />
        <view @click="handleCopy" class="qrcode-inviteCode">
          <text>邀请码: {{ info.userId }}</text>
          <text>复制</text>
        </view>
      </view>

      <view class="sect-table">
        <uni-table :loading="loading" border style="width: 100%;">
          <uni-tr>
            <uni-th align="center">昵称</uni-th>
            <uni-th align="center">等级</uni-th>
            <uni-th align="center">分享</uni-th>
            <uni-th align="center">分享补助</uni-th>
            <uni-th align="center">津贴补助</uni-th>
            <uni-th align="center">津贴补助</uni-th>
            <uni-th align="center">时间</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in tabList" :key="index">
            <uni-td align="center">{{ item.userName }}</uni-td>
            <uni-td align="center">{{ item.levelName }}</uni-td>
            <uni-td align="center">{{ item.share }}</uni-td>
            <uni-td align="center">{{ item.jumpShare }}</uni-td>
            <uni-td align="center">{{ item.jumpStaticProfit }}</uni-td>
            <uni-td align="center">{{ item.level ? '已消费' : '未消费' }}</uni-td>
            <uni-td align="center">{{ item.createTime }}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
	  <!-- #ifdef MP-WEIXIN -->
	  <view class="sect-btn">
	    <button open-type="share" class="share-btn">转发</button>
	    <view @click="handleShare" class="ewm-btn">保存二维码</view>
	  </view>
	  <!-- #endif -->
	  <!-- #ifndef MP-WEIXIN -->
      <view class="sect-btn">
        <view @click="handleShare">转发</view>
      </view>
	  <!-- #endif -->
    </section>
	
	<uv-qrcode ref="qrcode" canvas-id="qrcode" value="http://youpindou.com:9000/index.html" size="150px" :loading="false" :options="options" :hide="true"></uv-qrcode>
  </view>
</template>
<script>
import { getUserInfo } from '@/common/auth';
export default {
  data() {
    return {
      tabList: [],
      loading: false,
      info: {},
      top: 0,
      options: {
        useDynamicSize: false,
        errorCorrectLevel: 'Q',
        margin: 10,
        areaColor: "#fff",
      },
	  ewmImg: '',
    }
  },
  onLoad() {
    let info = getUserInfo()
    this.info = info;
    this.top = uni.getSystemInfoSync().screenWidth / 375 * 325 - 4;
  },
  onShow() {
    this.getTabList();
  },
  onReady() {
	this.getEwmImg()
  },
  onShareAppMessage() {
  	return {
  	  title: '优品兜',
  	  path: `pages/premiumBag/home/index?inviteCode=${this.info.userId}`
  	}
  },
  methods: {
    //获取个人信息
    async getTabList() {
      let result = await this.$request.userProfitList({ userId: this.info.userId })
      const { data } = result;
      data.map((item, index) => {
        item.id = index;
        switch (item.level) {
          case 0: //普通用户
            item.levelName = '普通用户';
            break;
          case 1: //vip
            item.levelName = 'vip';
            break;
          case 2: //svip
            item.levelName = 'svip';
            break;
          case 3: //兜董
            item.levelName = '兜董';
            break;
          case 4: //兜主
            item.levelName = '兜主';
            break;
          case 5: //兜王
            item.levelName = '兜王';
            break;
          default: //默认普通用户
            item.levelName = '普通用户';
            break;
        }
      });
      this.tabList = data;
    },
	getEwmImg() {
		this.$refs.qrcode.toTempFilePath({
			 success: (res) => {
				this.ewmImg = res.tempFilePath
			 }
		});
	},
    //分享
    handleShare() {
		this.$refs.qrcode.save({
			success: (res) => {
				this.$toast('保存成功!')
			}
		});
    },
	// weixinShare() {
	// 	this.onShareAppMessage()
	// },

    //复制
    handleCopy() {
      uni.setClipboardData({
        data: this.info.userId.toString(), //要被复制的内容
        success: () => { //复制成功的回调函数
          this.$toast('复制成功!')
        },
        fail: (err) => {
          console.log(err);
        }
      });
    },
  },

};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  font-size: 28rpx;
  font-family: 'PingFang SC-Medium';
  background-color: #fff;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  header {
    width: 100%;
    position: fixed;
    top: 6%;
    left: 4%;
    z-index: 100;

    image {
      width: 18rpx;
      height: 30rpx;
      display: block;
      margin-right: 6rpx;
    }
  }

  section {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    // padding-bottom: 160rpx;
    box-sizing: border-box;
    position: relative;

    .sect-qrCode {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 0;
	  .ewm-img {
		  width: 150px;
		  height: 150px;
	  }
      .qrcode-inviteCode {
        display: flex;
        justify-content: space-between;
        align-items: center;

        text:last-child {
          font-size: 24rpx;
          margin-left: 10rpx;
          color: #999;
        }
      }
    }



  }

  .sect-table {
    padding: 0 24rpx;
    box-sizing: border-box;
    position: relative;
    top: -180rpx;
  }

  .sect-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24rpx 48rpx;
	/* 兼容 iOS < 11.2 */
	padding-bottom: constant(safe-area-inset-bottom); 
	/* 兼容 iOS >= 11.2 */
	padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    box-shadow: 0px -4rpx 8rpx 0px rgba(51, 51, 51, 0.1);
    background-color: #fff;
	display: flex;
	justify-content: space-between;

    view {
      width: 100%;
      height: 80rpx;
      background: #32B499;
      border-radius: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
	.share-btn {
		width: 48%;
		height: 80rpx;
		background: #32B499;
		border-radius: 40rpx;
		color: #fff;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.ewm-btn {
		width: 48%;
		color: #32B499;
		background:#fff;
		border: 1rpx solid #32B499; 
	}
  }
}
</style>
